<template>
	<view class="container">
		<view class="cut"></view>
		<!-- 单填空 -->
		<view class="questionItem">
			<view class="title">1.问题一</view>
			<input class="inp" type="text" placeholder="placeholder" />
		</view>
		<!-- 多填空 -->
		<view class="questionItem">
			<view class="title">2.问题二</view>
			<view class="itemWrapper">
				<view class="item" v-for="(item,index) in 3" :key="index">
					<text class="tit">填空:</text>
					<input class="in" type="text" placeholder="placeholder" />
				</view>
			</view>
		</view>
		<!-- 单选 -->
		<view class="questionItem">
			<view class="title">3.问题三</view>
			<radio-group @change="radioChange">
				<label class="list-cell" v-for="(item, index) in 3" :key="index">
					<radio style="transform:scale(0.6);margin-left: -14rpx;" :value="index" />
					<view>电话分机后端返</view>
				</label>
			</radio-group>
		</view>
		<!-- 多选 -->
		<view class="questionItem">
			<view class="title">4.问题四</view>
			<checkbox-group @change="checkboxChange1">
				<label class="list-cell" v-for="(item, index) in 3" :key="index">
					<view>
						<checkbox style="transform:scale(0.6);margin-left: -14rpx;" :value="index" />
					</view>
					<view>多年膏方既可的功夫</view>
				</label>
			</checkbox-group>
		</view>
		<!-- 多选需备注 -->
		<view class="questionItem">
			<view class="title">5.问题五</view>
			<radio-group @change="radioChange">
				<label class="list-cell" v-for="(item, index) in 3" :key="index">
					<radio style="transform:scale(0.6);margin-left: -14rpx;" :value="index" />
					<view>电话分机后端返</view>
				</label>
			</radio-group>
			<view class="note">
				<text>注明:</text>
				<input type="text" value="" />
			</view>
		</view>
		<!-- 地址选择 -->
		<view class="questionItem">
			<view class="title">6.问题六</view>
			<view class="address">
				<input class="inp" type="text" disabled v-model="addressName" @click="openAddress" placeholder="请选择地址"/>
				<simple-address ref="simpleAddress" @onConfirm="onConfirm" themeColor="#FF1F2F"></simple-address>
			</view>
		</view>
		<!-- 文本填空 -->
		<view class="questionItem">
			<view class="title">7.问题七</view>
			<textarea class="texta" value="" placeholder="" />
		</view>
		<view class="cut"></view>
		<!-- 单图上传 -->
		<view class="questionItem">
			<view class="title uploadImg">问题七</view>
			<view class="licenseImg" v-for="(item,index) in imgArr" :key='index' @tap="upload_img(index)">
				<view class="img-del" @tap.stop="imgDel(index)"></view>
				<image :src="item" mode="aspectFit"></image>
			</view>
			<view class="licenseImg" @tap="upload_img()"></view>
		</view>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	import {
		baseUrl
	} from "@/api/api.js"
	export default {
		name: "zh-questionnaire",
		components:{
			simpleAddress
		},
		data() {
			return {
				addressName: '',
				baseUrl: '',
				imgArr: []
			}
		},
		props: {},
		mounted() {
			this.baseUrl = baseUrl()
		},
		methods: {
			radioChange() {

			},
			checkboxChange1() {
				
			},
			openAddress(){
				this.$refs.simpleAddress.open();
			},
			onConfirm(e){
				this.pickerText = JSON.stringify(e);
				this.addressName = e.label;
				let arrAdd = e.label.split('-'); 
				// this.addressData.province = arrAdd[0];
				// this.addressData.city = arrAdd[1];
				// this.addressData.district = arrAdd[2];
			},
			upload_img(type) {
				let _this = this;
				let token = uni.getStorageSync("Authori-zation");
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.showLoading({
							mask:true,
							title: "上传中"
						})
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0];
						_this.imgArr.push(imgFiles)
						console.log(_this.imgArr)
						// uni.uploadFile({
						// 	// 需要上传的地址
						// 	url: _this.baseUrl + "/upload/image",
						// 	header: {
						// 		"Authori-zation": "Bearer " + token
						// 	},
						// 	// filePath  需要上传的文件
						// 	filePath: imgFiles,
						// 	name: "file",
						// 	success(_res) {
						// 		uni.hideLoading()
						// 		var res = JSON.parse(_res.data);
						// 		if (_res.statusCode === 200 && res.status === 200) {
									
						// 		} else {
						// 			uni.showToast({
						// 				title: "上传失败"
						// 			});
						// 		}
						// 	}
						// })
					}
				});
			},
			imgDel(index) {
				this.imgArr.splice(index,1)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.container {
	.cut{
		height: 20rpx;
		background-color: #f5f5f5;
	}
	.questionItem{
		padding: 30rpx 60rpx;
		color: #333;
		.title{
			font-size:28rpx;
		}
		.uploadImg{
			font-weight: bold;
		}
		.inp{
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1rpx solid #eee;
		}
		.itemWrapper{
			display: flex;
			flex-wrap: wrap;
			.item{
				display: flex;
				width: 50%;
				min-width: 50%;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				padding: 10rpx 0;
				.in{
					flex: 1;
					height: 59rpx;
					line-height: 60rpx;
					padding-left: 10rpx;
					border-bottom: 1rpx solid #eee;
				}
			}
		}
		.list-cell{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			height: 60rpx;
			margin-top: 10rpx;
			color: #999;
		}
		.note{
			display: flex;
			align-items: center;
			height: 60rpx;
			text{
				font-size: 24rpx;
			}
			input{
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				border-bottom: 1rpx #eee solid;
				flex: 1;
				padding-left: 10rpx;
			}
		}
		.texta{
			margin-top: 30rpx;
			border: 1rpx solid #eee;
			border-radius: 10rpx;
			width: 100%;
			padding: 20rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			box-sizing: border-box;
		}
		.licenseImg {
			margin-top: 30rpx;
			width: 100%;
			height: 300rpx;
			box-sizing: border-box;
			background: url(../../static/images/public/imgUpload.png) no-repeat center center;
			background-size: 90rpx 90rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1px solid rgba(238, 238, 238, 1);
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.img-del{
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 12rpx;
				top: 12rpx;
				background-color: #EB0909;
				border-radius: 50%;
				color: white;
				font-size: 34rpx;
				z-index: 999;
			}
			.img-del:before{
				content: '';
				width: 16rpx;
				height: 1px;
				position: absolute;
				left: 10rpx;
				top: 18rpx;
				background-color: #fff;
			}
		}
	}
}
</style>
